<template>
    <div class="bindCentList">
      <div class="left">
        <ul>
            <li @click="goto_index(78945446111111)" class="mybox" v-for="(item,index) in CentList" :class="{'end':item==0,'conduct':item==1,'awaits':item==2}">
                <div>
                  <div>
                    <!--  <p v-if="end">已结束</p>
                    <p v-if="conduct">已结束</p>
                    <p v-if="awaits">已结束</p> -->
                    <p v-if="item==0">已结束</p>
                    <p v-if="item==1">对战中</p>
                    <p v-if="item==2">等待中<span class="an1"></span><span class="an2"></span><span class="an3"></span></p>
                  </div>
                  <p>3回合{{item}}</p>
                </div>
                <div>
                  <div class="hedar-box Two-hedar">
                    <div>
                      <p><img src="../../assets/fight-add-hedar.png" ></p>
                      <!-- <p><img src="../../assets/hedar-icon1.png" ></p> -->
                    </div>
                    <div>
                      <!-- <p><img src="../../assets/fight-add-hedar.png" ></p> -->
                      <p class="player"><img src="../../assets/hedar-icon1.png" ></p>
                    </div>
                  </div>
                  <div class="btn">
                    <p class="btn-end" v-if="end">已结束</p>
                  </div>
                </div>
                <div>
                  <p><img src="../../assets/fight-list.png" ></p>
                  <p><img src="../../assets/fight-list.png" ></p>
                  <p><img src="../../assets/fight-list.png" ></p>
                  <p><img src="../../assets/fight-list.png" ></p>
                  <p><img src="../../assets/fight-list.png" ></p>
                </div>
            </li>

            <li v-if="keyan" :class="{'conduct':conduct}">
                <div>
                  <div>
                    <!-- <p v-if="end">已结束</p> -->
                    <p v-if="conduct">对战中</p>
                    <!-- <p v-if="awaits">已结束</p> -->
                  </div>
                  <p>3回合</p>
                </div>
                <div>
                  <div class="hedar-box Three-hedar">
                    <div><p class="player"><img src="../../assets/hedar-icon1.png" ></p></div>
                    <div><p><img src="../../assets/fight-add-hedar.png" ></p><p class="player"><img src="../../assets/hedar-icon1.png" ></p></div>
                  </div>
                  <div class="btn">
                    <p class="btn-conduct" v-if="conduct">立即观看</p>
                  </div>
                </div>
                <div>
                  <p><img src="../../assets/fight-list.png" ></p>
                  <p><img src="../../assets/fight-list.png" ></p>
                  <p><img src="../../assets/fight-list.png" ></p>
                </div>
            </li>

            <li v-if="keyan" :class="{'awaits':awaits}">
                <div>
                  <div>
                  <!--  <p v-if="end">已结束</p>
                    <p v-if="conduct">已结束</p> -->
                    <p v-if="awaits">等待中...</p>
                  </div>
                  <p>3回合</p>
                </div>
                <div>
                  <div class="hedar-box Two-hedar">
                    <div>
                      <p><img src="../../assets/fight-add-hedar.png" ></p>
                      <!-- <p><img src="../../assets/hedar-icon1.png" ></p> -->
                    </div>
                    <div>
                      <!-- <p><img src="../../assets/fight-add-hedar.png" ></p> -->
                      <p class="player"><img src="../../assets/hedar-icon1.png" ></p>
                    </div>
                  </div>
                  <div class="btn">
                    <p class="btn-awaits" v-if="awaits">立即加入<img src="../../assets/money-icon.png" ><span>99.6</span></p>
                  </div>
                </div>
                <div>
                   <p><img src="../../assets/fight-list.png" ></p>
                </div>
            </li>

            <li v-if="keyan" :class="{'awaits':awaits}">
                <div>
                  <div>
                  <!--  <p v-if="end">已结束</p>
                    <p v-if="conduct">已结束</p> -->
                    <p v-if="awaits">等待中...</p>
                  </div>
                  <p>3回合</p>
                </div>
                <div>
                  <div class="hedar-box Two-hedar">
                    <div>
                      <p><img src="../../assets/fight-add-hedar.png" ></p>
                      <!-- <p><img src="../../assets/hedar-icon1.png" ></p> -->
                    </div>
                    <div>
                      <!-- <p><img src="../../assets/fight-add-hedar.png" ></p> -->
                      <p class="player"><img src="../../assets/hedar-icon1.png" ></p>
                    </div>
                  </div>
                  <div class="btn">
                    <p class="btn-awaits" v-if="awaits">立即加入<img src="../../assets/money-icon.png" ><span>99.6</span></p>
                  </div>
                </div>
                <div>
                   <p><img src="../../assets/fight-list.png" ></p>
                </div>
            </li>

            <li v-if="keyan" :class="{'awaits':awaits}">
                <div>
                  <div>
                  <!--  <p v-if="end">已结束</p>
                    <p v-if="conduct">已结束</p> -->
                    <p v-if="awaits">等待中...</p>
                  </div>
                  <p>3回合</p>
                </div>
                <div>
                  <div class="hedar-box Two-hedar">
                    <div>
                      <p><img src="../../assets/fight-add-hedar.png" ></p>
                      <!-- <p><img src="../../assets/hedar-icon1.png" ></p> -->
                    </div>
                    <div>
                      <!-- <p><img src="../../assets/fight-add-hedar.png" ></p> -->
                      <p class="player"><img src="../../assets/hedar-icon1.png" ></p>
                    </div>
                  </div>
                  <div class="btn">
                    <p class="btn-awaits" v-if="awaits">立即加入<img src="../../assets/money-icon.png" ><span>99.6</span></p>
                  </div>
                </div>
                <div>
                   <p><img src="../../assets/fight-list.png" ></p>
                </div>
            </li>

        </ul>
      </div>
      <div class="right">
        <div class="right-hedar">
          <div class="title">昨日之星</div>
          <div class="right-hedar-box"><img src="../../assets/hedar-icon1.png" ></div>
          <div class="ears-icon"><img src="../../assets/ears-icon.png" ></div>
          <div class="name">威尔斯密斯</div>
          <div class="money"><img src="../../assets/money-icon.png" >1255555.66(奖200)</div>
        </div>
        <div class="right-cent">
          <div class="tal_box">
            <p @click="get_tal(0)" :class="{'activ':tal==0}">今日排行</p>
            <p @click="get_tal(1)" :class="{'activ':tal==1}">昨日排行</p>
          </div>
          <ul class="right-cent_list">
            <li>
              <div>
                <div><img src="../../assets/hedar-icon1.png" ></div>
                <p>威尔斯密斯</p>
              </div>
              <p><img src="../../assets/money-icon.png" >1256.66</p>
            </li>
            <li>
              <div>
                <div><img src="../../assets/hedar-icon1.png" ></div>
                <p>威尔斯密斯</p>
              </div>
              <p><img src="../../assets/money-icon.png" >125.66</p>
            </li>
          </ul>
        </div>
        <p class="text" v-if="tal==0">距离结束第10名还差: 216666.66</p>
      </div>
    </div>
</template>

<script>
export default {
  props:['CentList'],
 data () {
    return {
      tal: 0,
      end: true,   //结束
      conduct: true,  //进行
      awaits: true, //等待
      keyan: false
    }
  },
  methods: {
      get_tal(e){
        this.tal = e;
      },
      goto_index(e){
        this.$emit('getindex', e);
      }
  },
  created() {
    console.log(this.CentList)
  }
}
</script>

<style scoped>


  .mybox-leave-active,
  .mybox-enter {
  transition: all .8s ease-out;
  transform: scale(.1) !important;
  }

  .mybox-leave,
  .mybox-enter-active {
    transition: all .8s ease-out;
   transform: scale(1);
  }

  .bindCentList{
    width: 100%;
    padding-right: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 11px 0;
  }
  .bindCentList .left{
    width: 925px;
    /* background-color: red; */
  }
  .bindCentList .left>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .bindCentList .left>ul>li{
    width: 228px;
    height: 285px;
    box-sizing: border-box;
    margin-right: 4px;
    margin-bottom: 17px;
    cursor: pointer;
  }
  .bindCentList .left>ul>li:nth-child(4n){
    margin-right: 0px;
  }
  .bindCentList .left>ul>li>div:first-child{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    color: #FFFFFF;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
  }
  .bindCentList .left>ul>li .hedar-box{
    padding: 16px 0 19px;
    height: 133px;
    box-sizing: border-box;
  }
  .bindCentList .left>ul>li .Two-hedar{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bindCentList .left>ul>li .Two-hedar >div{
    width: 49px;
    height: 49px;
    border-radius: 50%;
    margin: 0 5px;
  }
  .bindCentList .left>ul>li  .player{
    border: 2px solid rgba(255,255,255,.2);
    width: 49px;
    height: 49px;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .bindCentList .left>ul>li  .player img{
    width: 100%;
    height: 100%;
  }
  .bindCentList .left>ul>li .Three-hedar>div{
    display: flex;
    justify-content: center;
  }
  .bindCentList .left>ul>li .Three-hedar>div>p{
    width: 49px;
    height: 49px;
    margin: 0 5px;
  }
  .bindCentList .left>ul>li .btn>p{
    width: 154px;
    height: 30px;
    border-radius: 15px;
    margin: 0 auto;
    line-height: 30px;
    font-size: 14px;
  }
  .bindCentList .left>ul>li .btn .btn-end{
   border: 1px solid #AEAEAE;
   color: #AEAEAE;
  }
  .bindCentList .left>ul>li .btn .btn-conduct{
   border: 1px solid #FFA22A;
   color: #FFA22A;
  }
  .bindCentList .left>ul>li .btn .btn-awaits{
    border: 1px solid #318CD8;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bindCentList .left>ul>li .btn .btn-awaits img{
    width: 14px;
    height: 14px;
    margin: 0 5px;
  }
  .bindCentList .left>ul>li .btn .btn-awaits span{
    color: #FFA32A;
  }
  .bindCentList .left>ul>li>div:nth-child(3){
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 0 5px;
    box-sizing: border-box;
  }
  .bindCentList .left>ul>li>div:nth-child(3) p{
    width: 48px;
    height: 48px;
    position: relative;
  }
  .bindCentList .left>ul>li>div:nth-child(3) p img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 48px;
  }
  .bindCentList .left ul .end{
    background: linear-gradient(0deg, #6A6F75, #34353A);
  }
  .bindCentList .left ul .conduct{
    background: linear-gradient(0deg, #706042, #302521);
  }
  .bindCentList .left ul .awaits{
    background: linear-gradient(0deg, #244B86, #112240);
  }
  .bindCentList .left ul .end>div:first-child{
    background-color: #46484D;
    border-bottom: 2px solid #4F5258;
  }
  .bindCentList .left ul .conduct>div:first-child{
    background-color: #3D3128;
    border-bottom: 2px solid #5A4B38;
  }
  .bindCentList .left ul .awaits>div:first-child{
    background-color: #172E55;
    border-bottom: 2px solid #1F4174;
  }
  .bindCentList .left ul .end>div:first-child>div:first-child{
    color: #999999;
  }
  .bindCentList .left ul .conduct>div:first-child>div:first-child{
    color: #FFA22A;
  }
  .bindCentList .left ul .awaits>div:first-child>div:first-child{
    color: #6CBCFF;
  }
  .bindCentList .left ul .end>div:nth-child(2){
    height: 187px;
  }
  .bindCentList .left ul .conduct>div:nth-child(2){
    height: 187px;
  }
  .bindCentList .left ul .awaits>div:nth-child(2){
    height: 187px;
  }
  .bindCentList .left ul .end>div:nth-child(3){
    height: 62px;
    background-color: #46484D;
  }
  .bindCentList .left ul .conduct>div:nth-child(3){
    height: 62px;
    background-color: #3D3128;
  }
  .bindCentList .left ul .awaits>div:nth-child(3){
    height: 62px;
    background-color: #172E55;
  }
  .bindCentList .right{
    width: 253px;
  }
  .bindCentList .right .right-hedar{
    width: 100%;
    height: 193px;
    background-color: #14263E;
  }
  .bindCentList .right .right-hedar .title{
    width: 195px;
    height: 34px;
    line-height: 34px;
    background-image: url(../../assets/bind-cent-list-right-title.png);
    background-size: 100% 100%;
    margin:  0 auto;
    color: #D0EEFF;
    font-size: 18px;
  }
  .bindCentList .right  .right-hedar-box{
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid #ECEA4F;
    overflow: hidden;
    margin: 12px auto 0;
  }
  .bindCentList .right  .right-hedar-box img{
    width: 100%;
    height: 100%;
  }
  .bindCentList .right  .ears-icon{
    margin: -25px auto;
  }
  .bindCentList .right .right-hedar .name{
    margin-top: 21px;
    color: #D0EEFF;
    font-size: 14px;
  }
  .bindCentList .right .right-hedar .money{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #FFA22A;
    line-height: 14px;
    margin-top: 5px;
  }
  .bindCentList .right .right-hedar .money img{
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }
  .bindCentList .right .right-cent{
    width: 100%;
    margin-top: 10px;
    background-color: #14263E;
    height: 535px;
  }
  .bindCentList .right .right-cent .tal_box{
    display: flex;
  }
  .bindCentList .right .right-cent .tal_box p{
    height: 51px;
    line-height: 51px;
    border-bottom: 3px solid #28497B;
    color: #D0EEFF;
    width: 50%;
    cursor: pointer;
  }
  .bindCentList .right .right-cent .tal_box .activ{
    border-bottom: 3px solid #38A6FA;
    color: #FFFFFF;
    background-color: #4686C4;
  }
  .bindCentList .right .right-cent .right-cent_list{
    width: 100%;
  }
  .bindCentList .right .right-cent .right-cent_list li{
    display: flex;
  }
  .bindCentList .right .text{
    margin-top: 5px;
    color: #D0EEFF;
    font-size: 14px;
  }
  .bindCentList .right .right-cent .right-cent_list li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    padding: 0 5px;
    background-color: #1D2E45;
    margin-bottom: 5px;
  }
  .bindCentList .right .right-cent .right-cent_list li>div{
    display: flex;
    align-items: center;
    width: 155px;
    font-size: 14px;
    color: #9CDBFF;
  }
  .bindCentList .right .right-cent .right-cent_list li>div>div:first-child{
    width: 39px;
    height: 39px;
    box-sizing: border-box;
    border-radius: 50%;
    margin-right: 5px;
  }
  .bindCentList .right .right-cent .right-cent_list li>div>div:first-child img{
    width: 100%;
    height: 100%;
  }
  .bindCentList .right .right-cent .right-cent_list li:first-child>div{
    color: #ECEA4F;
  }
  .bindCentList .right .right-cent .right-cent_list li:first-child>div>div:first-child{
    border: 2px solid #ECEA4F;
  }
  .bindCentList .right .right-cent .right-cent_list li>p{
    display: flex;
    color: #FFA22A;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .bindCentList .right .right-cent .right-cent_list li>p img{
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }
  .mybox{
   animation:myfirst .6s ease-out;
  }
  @keyframes myfirst
  {
  	from {transform: scale(.1);}
  	to {transform: scale(1);}
  }
  .an1{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #6CBCFF;
    display: inline-block;
    margin: 0 1px;
    animation:scan1 .8s infinite;
  }
  .an2{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #6CBCFF;
    display: inline-block;
    margin: 0 1px;
    animation:scan2 .8s infinite;
  }
  .an3{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #6CBCFF;
    display: inline-block;
    margin: 0 1px;
    animation:scan3 .8s infinite;
  }
  @keyframes scan1
  {
    0% {transform: scale(1);opacity: 1;}
    25% {transform: scale(.4);opacity: .4;}
    50% {transform: scale(.1);opacity: .1;}
    75% {transform: scale(.6);opacity: .6;}
    100% {transform: scale(1);opacity: 1;}
  }
  @keyframes scan2
  {
  	0% {transform: scale(0.6);opacity: .6;}
    25% {transform: scale(1);opacity: 1;}
  	50% {transform: scale(.4);opacity: .4;}
    75% {transform: scale(.1);opacity: .1;}
    100%{transform: scale(.6);opacity: .6;}
  }
  @keyframes scan3
  {
  	0% {transform: scale(.1);opacity: .1;}
  	25% {transform: scale(.6);opacity: .6;}
  	50% {transform: scale(1);opacity: 1;}
  	75% {transform: scale(.4);opacity: .4;}
  	100%{transform: scale(.1);opacity: .1;}
  }
</style>
